<template>
  <view class="loading-box" v-show="show">
    <image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/loading.gif?v=2" mode="aspectFill"></image>
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
    methods: {
      dismiss() {
        this.$store.commit("showLoading", false);
      },
    },
    computed: {
      show() {
        return this.$store.state.loading;
      },
    },
  };
</script>

<style>
  .loading-box {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loading-box image {
    margin-bottom: 40px;
    width: 150rpx;
    height: 150rpx;
  }
</style>